<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹出风格表单页面</title>
    <link rel="stylesheet" href="assets/css/index.css">
    <link rel="stylesheet" href="assets/css/login.css">
    <link rel="stylesheet" href="assets/css/register.css">
    <link rel="stylesheet" href="assets/css/forget.css">
</head>

<body>
    <div class="main">
        <div class="link">
            <button class="login">登录</button>
            <button class="register">注册</button>
            <button class="reset">重置密码</button>
        </div>

        <!-- 登录表单 -->
        <div class="login-box">
            <div class="login-top">
                <h1 class="login-title">弹出风格表单登录页</h1>
                <button class="login-close close">X</button>
            </div>
            <form class="login-form">
                <h2 class="login-title">用户登录</h2>
                <input type="text" name="login-username" class="login-username" id="login-username" placeholder="用户名"
                    autocomplete="off">
                <input type="password" name="login-password" class="login-password" id="login-password" placeholder="密码"
                    autocomplete="off">
                <input type="submit" value="登录" class="login-button" id="login-button">

                <div class="divider">
                    <span class="line"></span>
                    <span class="divider-text">或者</span>
                    <span class="line"></span>
                </div>

                <div class="another-login">
                    <div class="another-link">
                        <a href="#qq">
                            <img src="assets/images/qq.png" alt="qq.png">
                        </a>
                        <a href="#wechat">
                            <img src="assets/images/wechat.png" alt="wechat.png">
                        </a>
                    </div>
                </div>
            </form>
        </div>

        <!-- 注册表单 -->
        <div class="register-box">
            <div class="register-top">
                <h1 class="register-title">弹出风格表单注册页</h1>
                <button class="register-close close">X</button>
            </div>
            <form class="register-form">
                <h2 class="register-title">用户注册</h2>
                <input type="text" name="register-username" class="register-username" id="register-username"
                    placeholder="请输入用户名" autocomplete="off">
                <input type="password" name="register-password" class="register-password" id="register-password"
                    placeholder="请输入密码" autocomplete="off">
                <input type="text" name="register-phone" class="register-phone" id="register-phone" placeholder="请输入手机号"
                    autocomplete="off">
                <div class="register-code-pane">
                    <input type="text" name="register-code" class="register-code" id="register-code"
                        placeholder="请输入验证码" autocomplete="off">
                    <input type="button" value="获取验证码" class="register-code-button" id="register-code-button">
                </div>
                <input type="submit" value="注册" class="register-button" id="register-button">
            </form>
        </div>

        <!-- 重置密码表单 -->
        <div class="reset-box">
            <div class="reset-top">
                <h1 class="reset-title">弹出风格表单重置密码页</h1>
                <button class="reset-close close">X</button>
            </div>
            <form class="reset-form">
                <h2 class="reset-title">重置密码</h2>
                <input type="text" name="reset-username" class="reset-username" id="reset-username"
                    placeholder="请输入要重置密码的用户名" autocomplete="off">
                <input type="password" name="reset-password" class="reset-password" id="reset-password"
                    placeholder="请输入新密码" autocomplete="off">
                <input type="text" name="reset-phone" class="reset-phone" id="reset-phone" placeholder="请输入用户名注册的手机号"
                    autocomplete="off">
                <div class="reset-code-pane">
                    <input type="text" name="reset-code" class="reset-code" id="reset-code"
                        placeholder="请输入验证码" autocomplete="off">
                    <input type="button" value="获取验证码" class="reset-code-button" id="reset-code-button">
                </div>
                <input type="submit" value="重置密码" class="reset-button" id="reset-button">
            </form>
        </div>

        <!-- 遮罩 -->
        <div class="mask"></div>
    </div>
</body>

<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/index.js"></script>
<script src="assets/js/login.js"></script>
<script src="assets/js/register.js"></script>
<script src="assets/js/forget.js"></script>

</html>